<template>
  <view class="form-item">
    <text class="form-label">{{ label }}</text>
    <view class="form-input-container">
      <!-- 插槽允许自定义输入控件 -->
      <slot>
        <!-- 默认为普通输入框 -->
        <!-- 使用uni-app的input组件替代原生input -->
        <view class="uni-input-wrapper">
          <input
            class="uni-input"
            type="text"
            :value="modelValue"
            :placeholder="placeholder"
            @input="handleInput"
          />
        </view>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
// 定义组件属性
const props = withDefaults(
  defineProps<{
    label: string;
    modelValue?: string;
    placeholder?: string;
  }>(),
  {
    modelValue: "",
    placeholder: "请输入",
  },
);

// 定义事件
const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

// 处理输入事件
const handleInput = (e: any) => {
  emit("update:modelValue", e.detail.value);
};
</script>

<style lang="scss" scoped>
.form-item {
  margin-bottom: 12px; // 减少间距

  .form-label {
    display: block;
    font-size: 13px; // 缩小字体
    color: #555;
    margin-bottom: 4px; // 减少间距
    font-weight: 500;
  }

  .form-input-container {
    width: 100%;
  }

  .uni-input-wrapper {
    width: 100%;
    height: 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;

    .uni-input {
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: #333;
    }
  }
}
</style>
